<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./../templates/applicationTemplate.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j">

    <ui:define name="title">
        SGA - #{bundle.matchViewTitle}
    </ui:define>

    <ui:define name="content">

        <h:form>

            <rich:panel>

                <f:facet name="header" >
                    <h:outputText class="mainPanel" 
                                  value="#{bundle.matchViewTitle}" />
                </f:facet>

                <h:panelGrid columns="2" >

                    <rich:dataTable keepSaved="true" id="soccerMatchesTable"
                                    value="#{matchManagedBean.tableHandler.dataModel}"
                                    var="record" rowKeyVar="rowKey" 
                                    rows="#{matchManagedBean.tableHandler.getRowCount()}" 
                                    rowClasses="odd-row" 
                                    onrowmouseover="jQuery(this).addClass('active-row');" 
                                    onrowmouseout="jQuery(this).removeClass('active-row');" > 

                        <f:facet name="header" >
                            <rich:columnGroup>

                                <rich:column>

                                    <h:outputText styleClass="arrangeableHeader" 
                                                  value="#{bundle.stadiumName}" />

                                    <br />

                                    <h:inputText value="#{matchManagedBean.tableHandler.filterValues['stadiumName']}">
                                        <a4j:ajax render="soccerMatchesTable" event="keyup" />
                                    </h:inputText>

                                </rich:column>

                                <rich:column>

                                    <h:outputText styleClass="arrangeableHeader" 
                                                  value="#{bundle.homeTeam}" />

                                    <br />

                                    <h:inputText value="#{matchManagedBean.tableHandler.filterValues['homeTeam']}">
                                        <a4j:ajax render="soccerMatchesTable" event="keyup" />
                                    </h:inputText>

                                </rich:column>

                                <rich:column>
                                    <h:outputText styleClass="arrangeableHeader" 
                                                  value="#{bundle.matchViewScoreTableColumnHeader}" />
                                </rich:column>

                                <rich:column>

                                    <h:outputText styleClass="arrangeableHeader" 
                                                  value="#{bundle.awayTeam}"  />

                                    <br />

                                    <h:inputText value="#{matchManagedBean.tableHandler.filterValues['awayTeam']}">
                                        <a4j:ajax render="soccerMatchesTable" event="keyup" />
                                    </h:inputText>

                                </rich:column>


                                <rich:column style="text-align: center;" 
                                             rendered="#{request.isUserInRole('Archiver')}" >
                                    <h:outputText styleClass="arrangeableHeader"
                                                  value="#{bundle.arrangeableTableActionsColumn}" />
                                </rich:column>

                            </rich:columnGroup>
                        </f:facet>

                        <a4j:ajax event="rowclick" render="soccerMatchesTable"
                                  listener="#{matchManagedBean.tableHandler.setSubtablesExpandedState(record['matchDate'])}" />

                        <rich:column colspan="#{request.isUserInRole('Archiver') ? '5' : '4'}"
                                     style="overflow: hidden; text-align: center;">

                            <h:graphicImage alt="icon" style="float: left;"
                                            library="icons"
                                            name="#{matchManagedBean.tableHandler.getSubtablesExpandedState(record['matchDate']) ? 'arrow-down-double-icon.png' : 'arrow-up-double-icon.png'}" />

                            <h:outputText value="#{record['matchDate']}" 
                                          style="font-size: 140%; font-weight: bold;" >
                                <f:convertDateTime type="date" dateStyle="medium" />
                            </h:outputText>

                            <h:graphicImage alt="icon" style="float: right;"
                                            library="icons"
                                            name="#{matchManagedBean.tableHandler.getSubtablesExpandedState(record['matchDate']) ? 'arrow-down-double-icon.png' : 'arrow-up-double-icon.png'}" />

                        </rich:column>


                        <rich:collapsibleSubTable keepSaved="true" id="matchDayTable" 
                                                  expandMode="ajax" rowClasses="odd-row, even-row" 
                                                  expanded="#{matchManagedBean.tableHandler.getSubtablesExpandedState(record['matchDate'])}"
                                                  value="#{matchManagedBean.tableHandler.getSoccerMatchesByDate(record['matchDate'])}" 
                                                  var="match" 
                                                  onrowclick="processRowKey(#{match['id']})"
                                                  onrowmouseover="jQuery(this).addClass('active-row');" 
                                                  onrowmouseout="jQuery(this).removeClass('active-row');" >

                            <rich:column filterExpression="stadiumName"
                                         filterValue="#{matchManagedBean.tableHandler.filterValues['stadiumName']}">
                                
                                <rich:tooltip showDelay="1500">#{bundle.columnTooltipText}</rich:tooltip>
                                
                                <h:outputText value="#{match['stadiumName']}" />
                                
                            </rich:column>

                            <rich:column filterExpression="homeTeam"
                                         filterValue="#{matchManagedBean.tableHandler.filterValues['homeTeam']}">
                                
                                <rich:tooltip showDelay="1500">#{bundle.columnTooltipText}</rich:tooltip>
                                
                                <h:outputText value="#{match['homeTeam'].name}" />
                                
                            </rich:column>

                            <rich:column>
                                
                                <rich:tooltip showDelay="1500">#{bundle.columnTooltipText}</rich:tooltip>
                                
                                <h:outputText value="#{matchManagedBean.getSoccerMatchScore(match)}" />
                                
                            </rich:column>

                            <rich:column filterExpression="awayTeam"
                                         filterValue="#{matchManagedBean.tableHandler.filterValues['awayTeam']}">
                                
                                <rich:tooltip showDelay="1500">#{bundle.columnTooltipText}</rich:tooltip>
                                
                                <h:outputText value="#{match['awayTeam'].name}" />
                                
                            </rich:column>

                            <rich:column style="text-align: center;" rendered="#{request.isUserInRole('Archiver')}" >
                                
                                <rich:tooltip showDelay="1500">#{bundle.columnTooltipText}</rich:tooltip>
                                
                                <a4j:commandButton image="/resources/icons/Button-Remove-icon.png" 
                                                   execute="@this" render="@none"
                                                   onclick="event.stopPropagation();"
                                                   oncomplete="#{rich:component('deleteConfirmWindow')}.show();" 
                                                   value="" styleClass="iconizedButton" >
                                    <f:setPropertyActionListener target="#{matchManagedBean.currentState}" value="DELETE" />
                                    <f:setPropertyActionListener target="#{matchManagedBean.currentlyManagedMatch}" value="#{match}" />
                                </a4j:commandButton>

                                <a4j:commandButton image="/resources/icons/Change-pencil-icon.png"
                                                   value="" styleClass="iconizedButton" 
                                                   action="#{matchManagedBean.processActionAndRedirect('EDIT')}" >
                                    <f:setPropertyActionListener target="#{matchManagedBean.currentlyManagedMatch}" value="#{match}" />
                                </a4j:commandButton>

                            </rich:column>

                        </rich:collapsibleSubTable>

                        <f:facet name="footer" >
                            <rich:dataScroller id="scroller" />
                        </f:facet>

                    </rich:dataTable>

                    <ui:include src="matchDetail.xhtml" >
                        <ui:param name="matchDetailPanelID" value="matchDetailPanel" />
                        <ui:param name="match" value="#{matchManagedBean.currentlyDetailedMatch}" />
                    </ui:include>

                </h:panelGrid>

                <a4j:jsFunction name="processRowKey" render="matchDetailPanel"
                                action="#{matchManagedBean.processShowDetailMatchRequest(key)}" >
                    <a4j:param name="key" assignTo="#{key}" />
                </a4j:jsFunction>

            </rich:panel>

            <a4j:jsFunction name="remove" action="#{matchManagedBean.handleAction}"
                            render="soccerMatchesTable matchDetailPanel" execute="@this" 
                            oncomplete="#{rich:component('deleteConfirmWindow')}.hide();" />

            <ui:include src="./../dialogs/confirmationDialogWindow.xhtml" >
                <ui:param name="confirmDialogWindowID" value="deleteConfirmWindow" />
                <ui:param name="confirmationText" value="#{bundle.deleteModalForm}" />
                <ui:param name="acceptButtonText" value="#{bundle.deleteButton}" />
                <ui:param name="acceptEventFunction" value="remove()" />
            </ui:include>

        </h:form>

    </ui:define>

</ui:composition>
